<template>
  <div class="cart">
    <header>
      <section>
        <router-link to="/home"><span class="cart_icon">&#xe6b0;</span></router-link></section>
      <h1>购物车</h1>
    </header>
    <div class="main">
      <img src="../assets/empty.png" alt="" />
      <p>这里只有孤单一个我</p>
      <div class="Btn">        
        <router-link to="/home" class="cart_Btn">去首页逛逛</router-link>
      </div>

      <div class="Btn">        
        <router-link to="/CartItems" class="cart_Btn">我的购物车</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

header{
    height: 1.2rem;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #0093e7;
    line-height: 1.7;
    min-height: 1.25333rem;
    z-index: 2;
}
header h1{
    font-size: .48rem;
    font-weight: normal;
    text-align: center;
    color: #fff;
    line-height: 1.2;
    padding-top: .32rem;
}
.cart_icon{
    font-family: 'iconfont'; 
    position: absolute;
    left:.1333rem;
    font-size:.88rem;
    color: #fff;
    line-height: 1.2rem;
}
.main{
  height: 14rem;
  background: #efefef;
  padding-top: 3rem;
  color: #a5a5a5;
  text-align: center;
}
.main img{
  width: 2.2rem;
  height: 2rem;   
}
.main p{
  color: #a5a5a5;
  text-align: center;
  line-height: 1.5rem;
  font-size: .37rem;
}
.Btn{
  display: inline-block;
}
.cart_Btn{
  width: 3.73rem;
  height: 1.2rem;
  background-color: #0099f1;
  display: block;
  font-size: .4rem;
  color: #fff;
  line-height: 1.17rem;
  text-decoration: none;
  border-radius: .08rem;
  margin: 0 auto;
  margin-bottom: 1rem;
}
</style>
